<template>
    <div class="app-container">
        <div v-if="opt != 'add'">
            <el-descriptions title="">
                <el-descriptions-item label="序号">
                    <el-tag size="medium">{{ obj != null ? obj.index : index }}</el-tag>
                </el-descriptions-item>
            </el-descriptions>
        </div>


        <el-form :model="form" ref="form" :rules="rulesProject" label-width="100px">
            <el-row style="margin: 0px 0px 0px 550px;">项目基本信息</el-row>
            <el-row style="margin-top:20px">
                <el-col :span="8">
                    <el-form-item label="项目编号" prop="projectNumber" label-width="110px">
                        <el-input v-model="form.projectNumber" placeholder="请输入项目编号" disabled="true" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="项目名称" prop="projectName" label-width="110px">
                        <el-input v-model="form.projectName" placeholder="请输入项目名称" disabled="true" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="项目负责人" prop="projectLeader" label-width="110px">
                        <el-input v-model="form.projectLeader" disabled="true" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="执行人" prop="executorName" label-width="110px">
                        <el-input v-model="form.executorName" disabled="true" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="费用" prop="sumAmount" label-width="110px">
                        <el-input v-model="form.sumAmount" disabled="true" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="启动时间" prop="attackTime" label-width="110px">
                        <el-date-picker clearable :disabled="opt == 'details'" style="width: 250px"
                            v-model="form.attackTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择启动时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="完成时间" prop="completeTime" label-width="110px">
                        <el-date-picker clearable :disabled="opt == 'details'" style="width: 250px"
                            v-model="form.completeTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择完成时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="项目阶段" prop="node" label-width="110px">
<!--                <div class="progress-bar">-->
<!--                    <ul class="yd-step-content">-->
<!--                        <li :class="item.calssCss" v-for="(item, index) in approvalProcessProject" :key="item.id" :id="item.id">-->
<!--                            <div v-if="index > 0" class="yd-step-line" :class="{'yd-step-line-active': item.calssCss === 'yd-step-item-current' || approvalProcessProject[index-1].calssCss === 'yd-step-item-current'}"></div>-->
<!--                            <em class="yd-step-checkmark"><i></i></em>-->
<!--                            <div class="yd-step-item-bottom">-->
<!--                                <p>{{ item.value }}</p>-->
<!--                            </div>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
              <div class="progress-bar" style="margin-top:-10px;">
                <!-- <div class="progress-bar-title">项目阶段</div> -->
                <ul class="yd-step-content">
                  <li :class="item.calssCss" v-for="item in approvalProcessProject" :id="item.id">
                    <em class="yd-step-checkmark"> <i></i></em>
                    <div class="yd-step-item-bottom">
                      <p>{{ item.value }}</p>
                    </div>
                  </li>
                </ul>
              </div>
            </el-form-item>
            <el-row :gutter="10" class="mb8">

            </el-row>
            <div style="text-align: left;margin-top:-10px">
                <el-button type="primary" size="mini" @click="addSchedule" v-show="addShow" v-if="opt != 'details'">新
                    增</el-button>
            </div>
            <div style="text-align: left;margin-top:-20px">
                <span style="font-size: 14px;margin: 50px 0px 50px 570px;">项目阶段说明</span>
            </div>
            <el-table style="margin-top:10px" v-loading="loading" :data="projectInfoList">
                <el-table-column label="阶段名称" align="center" prop="stageName" width="180" />
                <el-table-column label="阶段说明" align="center" prop="stageDesc" />
                <el-table-column label="是否完成" align="center" prop="stageStatus" :formatter="isStatus" />

                <el-table-column label="创建人" align="center" prop="creationName" />
                <el-table-column label="创建时间" align="center" prop="creationTime" width="180">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.creationTime, '{y}-{m}-{d}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="阶段附件" align="center" :show-overflow-tooltip="true" width="173">

                    <template slot-scope="scope">
                        <!-- 使用按钮作为可点击元素，并绑定点击事件 -->
                        <el-button @click="queryUploadFile(scope.row, scope.$index + 1)" type="text">
                            阶段附件
                        </el-button>
                    </template>
                    <!-- <template slot-scope="scope">
                        <el-button v-if="scope.row.url != null" @click.stop="handleView(scope.row.url)" size="small"
                        type="text">阶段附件</el-button>
                    </template> -->
                </el-table-column>
                <el-table-column label="操作" v-if="addShow === opt != 'details'" align="center" fixed="right"
                    class-name="small-padding fixed-width">

                    <template slot-scope="scope" v-if="scope.row.stageStatus == '0'">
                        <el-button v-show="addShow" size="mini" type="text" icon="el-icon-edit"
                            @click="handleUpdateSchedule(scope.row)"></el-button>
                        <el-button v-show="addShow" size="mini" type="text" icon="el-icon-delete"
                            @click="handleDelete(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <!-- 添加或修改项目进度对话框 -->
        <el-dialog :title="title" :visible.sync="open" append-to-body>
            <el-form ref="formSchedule" :model="formSchedule" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="12">

                        <el-form-item label="阶段名称" prop="stageName">
                            <el-select v-model="formSchedule.stageName" placeholder="请选择" style="width:285px">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <!-- <el-input v-model="formSchedule.stageName" placeholder="请输入阶段名称" disabled="true"/> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否完成" prop="radio">
                            <el-radio v-model="radio" label="1">是</el-radio>
                            <el-radio v-model="radio" label="0">否</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="阶段说明" prop="stageDesc">
                    <el-input v-model="formSchedule.stageDesc" type="textarea" placeholder="请输入内容" />
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="创建人" prop="creationName">
                            <el-input v-model="formSchedule.creationName" placeholder="请输入创建人" disabled="true" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="创建时间" prop="creationTime">
                            <el-input v-model="formSchedule.creationTime" placeholder="请输入创建时间" disabled="true" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="阶段附件">
                            <file-view :type="fjFileType" :businessId="businessId"
                                :businessCode="businessCode"></file-view>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

        </el-dialog>
        <!-- 查看附件 -->
        <el-dialog title="查看阶段附件" :row-style="{ height: '30px' }" :cell-style="{ padding: '0px' }"
            :visible.sync="openFileList" width="500px" append-to-body>
            <el-table :data="fileList">
                <el-table-column label="序号" type="index" :index="indexMethodFile" />
                <el-table-column label="文件名称" align="center" prop="fileName" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
                    width="120">

                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-view"
                            @click.stop="handleView(scope.row)"></el-button>
                        <el-button size="mini" type="text" icon="el-icon-download"
                            @click="handleDownload(scope.row.url, scope.row.fileName)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 图片预览 -->
        <el-dialog :visible.sync="dialogVisible" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <!-- pdf预览 -->
        <el-dialog :visible.sync="dialogVisiblePdf" append-to-body>
            <pdf v-for="item in pageTotal" :src="pdfUrl" :key="item" :page="item"></pdf>
        </el-dialog>
    </div>
</template>

<script>
import { listMaxIndex, getScheduleName, listSchedule, getSchedule, delSchedule, addSchedule, updateSchedule } from "@/api/project/projectSchedule";
import { getProjectInfo, updateProjectInfo } from "@/api/project/projectInfo";
import { listSubInfo, getSubInfo, delSubInfo, addSubInfo, updateSubInfo } from "@/api/project/subInfo";
import { updateProjectStageByProjectId } from "@/api/project/stage";
import { download } from "@/utils/request";
import FileView from "@/components/FileView/index"
import { id } from "@/api/system/UUID";
import pdf from 'vue-pdf'
import { queryFile, fileRemove } from "@/api/system/file";
export default {
    name: "Info",
    components: { FileView, pdf },
    props: {
        opt: {
            type: String,
            default: ""
        },
        id: {
            type: String,
            default: ""
        },
        sign: {
            type: String,
            default: ""
        },
        obj: {
            type: Object,
            default: null
        },
        //序号
        index: {
            type: Number,
            default: 0
        },
        addShow: {
            type: String,
            default: ""
        }
    },
    data() {
        var stageName = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('阶段名称不能为空'));
            }
            return callback()
        };
        return {
            fileList: [],
            openFileList: false,
            fjFileType: 0,
            businessCode: 'stage_file',
            checkType: false,
            //阶段信息-----
            active: '',
            activeName: '',
            approvalProcessProject: [],
            options: [],
            projectScheduleId: null,
            scheduleId: null,
            scheduleName: null,
            //-----
            radio: '1',
            typeShow: true,
            readonly: true,
            checkCount: 0,
            isShowTab: true,
            UUID: '',
            optionData: null,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],

            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 弹出层标题
            title: "",
            honorShow: '0',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                enterpriseId: null,
            },
            queryParamsSchedule: {
                projectId: null,
                state: null
            },
            //pdf预览
            dialogImageUrl: '',
            dialogImageUrlPdf: '',
            pageTotal: null,
            dialogVisible: false,
            dialogVisiblePdf: false,
            // 表单参数
            formSchedule: {
                //administrativeArea:''
                stageDesc: null,
                stageName: null,

            },
            businessId: null,
            // 表单参数
            formStage: {
                //administrativeArea:''
                ProjectId: null,
                name: null,
                state: null,
            },
            // 查询参数
            queryParamsFile: {
                pageNum: 1,
                pageSize: 15,
                fileName: null
            },
            form: {},
            // 表单校验
            rules: {

                stageName: [
                    { required: true, validator: stageName, trigger: "change" }
                ],
                stageDesc: [
                    { required: true, message: "阶段说明不能为空", trigger: "blur" }
                ],

            },
            rulesProject: {
                attackTime: [
                    { required: true, message: "启动时间不能为空", trigger: "blur" }
                ],

                completeTime: [
                    { required: true, message: "完成时间不能为空", trigger: "blur" }
                ],
            },
            list: [],
        };
    },
    created() {

        //this.getList();
        let url = window.location.href;
        // 获取参数部分
        let params = url.split('?')[1];
        this.bId = this.id;
        this.handleUpdate(this.id, this.sign)

        this.listScheduleName()
    },
    methods: {
        //文件预览
        handleView(row) {
            if (row.url != null && row.url != '' && (row.url).indexOf('.pdf') !== -1) {
                this.handlePictureCardPreviewPdf(row.url);
            } else {
                this.handlePictureCardPreview(row.url);
            }
        },
        handlePictureCardPreview(url) {
            this.dialogImageUrl = url;
            this.dialogVisible = true;
        },
        //pdf预览
        handlePictureCardPreviewPdf(url) {
            this.pdfUrl = pdf.createLoadingTask(url)
            // 获取页码
            this.pdfUrl.promise.then(pdf => this.pageTotal = pdf.numPages).catch(error => {
            })
            this.dialogImageUrlPdf = url;
            this.dialogVisiblePdf = true;
        },
        //下载
        handleDownload(fileUrl, fileName) {
            let params = {
                resource: fileUrl
            }
            download("/common/download/resource", params, fileName);
        },
        //序号展示
        indexMethodFile(index) {
            return (this.queryParamsFile.pageNum - 1) * this.queryParamsFile.pageSize + index + 1;
        },
        //查询文件
        queryUploadFile(row) {
            queryFile(row.id, "stage_file").then(response => {
                this.fileList = response.data;
                this.openFileList = true;
                console.log(this.fileList)
            });
        },
        isStatus(row, column) {
            var status = [];
            if (row.stageStatus == 1) {
                status.push("是");
            } else {
                status.push("否");
            }
            return status.join("");
        },
        listScheduleName() {
            // setTimeout(() => {

            // }, 150);
            this.queryParamsSchedule.projectId = this.id
            //** 查询项目阶段名称 根据项目id*/
            getScheduleName(this.queryParamsSchedule).then(response => {
                this.approvalProcessProject = response.data
                this.scheduleId = response.data[0].stageId//阶段信息主键id
                this.queryParams.stageId = response.data[0].stageId
                this.loading = true;

                //查询全部项目进度说明信息
                listSchedule(this.queryParams).then(response1 => {
                    this.projectInfoList = response1.rows;
                    this.total = response1.total;
                    this.loading = false;
                    // //如果没有数据 则active=0为第一步
                    // if(response1.total ==0){
                    //     this.active=0
                    // }else{//查询项目进度状态为已完成的数据
                    //     //this.queryParams.stageStatus = 1
                    //     listMaxIndex(this.queryParams).then(response2 => {
                    //
                    //         //如果没有已完成的数据 则active=0为第一步
                    //         if(response2.total ==0){
                    //             this.active=0
                    //         }else{//有数据则取它的index
                    //             this.active=response2.rows[0].sortIndex+1
                    //             const index = response2.rows[0].sortIndex+1
                    //             //this.activeName = response.data[index].lable
                    //             //alert(response.data[index].lable)
                    //             //this.formSchedule.stageName = response.data[index].lable
                    //             //this.formSchedule.sortIndex = index;
                    //             //alert(index)
                    //         }
                    //     });
                    // }
                });
            });

        },

        getFile(data) {
            //console.log(JSON.stringify(data))
        },
        // 关闭按钮
        cancel() {
            this.open = false;
            this.reset();
            this.$emit('change');
        },
        // 取消按钮
        cancelSchedule() {
            this.open = false;
            this.reset();
        },
        getId() {
            id({}).then(response => {
                this.guId = response.msg
                this.businessId = response.msg
            });
        },
        // 新增项目阶段按钮
        addSchedule() {
            this.reset();
            this.getId();
            this.fjFileType = 0
            this.open = true;
            //alert(this.scheduleId)
            this.title = "添加阶段说明";
            this.formSchedule.stageName = ""
            this.formSchedule.stageDesc = ""
            this.formSchedule.creationName = this.$store.state.user.name;
            this.formSchedule.creationTime = this.parseTime(new Date(), '{y}-{m}-{d}');
            this.radio = "1"
            this.queryParamsSchedule.state = "0"
            getScheduleName(this.queryParamsSchedule).then(response => {
                this.options = response.data
            })
        },

        /** 修改按钮操作 */
        handleUpdate(id, sign) {
            //this.reset();

            if (sign == "主") {
                getProjectInfo(id).then(response => {
                    this.form = response.data;
                });
            } else {
                getSubInfo(id).then(response => {
                    this.form = response.data;
                    this.form.sumAmount = response.data.cost;

                });
            }
        },
        get() {
            setTimeout(() => {
                this.queryParamsSchedule.projectId = this.id
                this.queryParamsSchedule.state = "0"//查询未完成的阶段
                getScheduleName(this.queryParamsSchedule).then(response1 => {
                    if (response1.data.length == 0) {
                        this.addShow = false
                    } else {
                        this.addShow = true
                    }
                })
            }, 300);
        },
        /** 修改按钮操作 */
        handleUpdateSchedule(row) {
            this.reset();
            this.title = "修改阶段说明";
            this.businessId = row.id
            this.fjFileType = 1
            getSchedule(row.id).then(response => {
                this.formSchedule = response.data;
                this.radio = response.data.stageStatus
                this.open = true;
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            //const internalIds = row.Id;
            this.$modal.confirm('是否确认删除阶段名称为"' + row.stageName + '"的数据项？').then(function () {

            }).then(() => {
                delSchedule(row.id).then(response => {
                    this.queryParamsSchedule.state = ""
                    this.listScheduleName();
                    this.get();
                    this.$modal.msgSuccess("删除成功");
                });

            }).catch(() => { });

        },
        /** 项目启动时间说明提交按钮 */
        submitOK() {
            if (new Date(this.form.completeTime).getTime() < new Date(this.form.attackTime).getTime()) {
                this.$message.error('启动时间不能大于完成时间！');
                return;
            }
            this.$refs["form"].validate(valid => {
                if (valid) {
                    updateProjectInfo(this.form).then(response => {
                        this.$modal.msgSuccess("修改成功");
                        this.listScheduleName();
                        this.get();
                    });
                }
            });
        },

        /** 阶段说明提交按钮 */
        submitForm() {
            this.$refs["formSchedule"].validate(valid => {
                if (valid) {
                    this.formSchedule.stageId = this.scheduleId;
                    this.formSchedule.stageStatus = this.radio;
                    this.formSchedule.sortIndex = this.active;

                    if (this.formSchedule.id != null) {
                        updateSchedule(this.formSchedule).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.queryParamsSchedule.state = ""
                            if (this.radio == "1") {
                                this.formStage.projectId = this.id//项目id
                                this.formStage.name = this.formSchedule.stageName
                                this.formStage.state = "1"
                                updateProjectStageByProjectId(this.formStage).then(response => {
                                    this.listScheduleName();
                                })
                            }

                            this.listScheduleName();
                            this.get();
                        });
                    } else {

                        //this.formSchedule. = this.activeName
                        this.formSchedule.id = this.guId;
                        addSchedule(this.formSchedule).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.queryParamsSchedule.state = ""
                            if (this.radio == "1") {
                                this.formStage.projectId = this.id//项目id
                                this.formStage.name = this.formSchedule.stageName
                                this.formStage.state = "1"
                                updateProjectStageByProjectId(this.formStage).then(response => {
                                    this.listScheduleName();
                                })
                            }

                            this.listScheduleName();
                            this.get();
                        });
                    }
                }
            });
        },

        // 表单重置
        reset() {
            this.formSchedule = {
                stageId: null,
                stageName: null,
                stageDesc: null,
                stageStatus: null,
                creationId: null,
                creationName: null,
                creationTime: null

            };
            this.resetForm("formSchedule");
        },
    }
};
</script>

<style type="text/css">
/* CSS Document */
body,
div,
ul,
li,
p {
    padding: 0;
    margin: 0;
}

li {
    list-style: none
}

body {
    background: #fff;
}

.progress-bar {
    text-align: left;
    width: 80%;  /* 增加宽度以适应更多节点 */
    height: 50px;
    position: relative;
    margin-bottom: 60px; /* 增加下边距适应长文本 */
    padding-left: 0;
    padding-top: 24px;
}
.progress-bar { width: 30%; height: 50px; position: relative; margin-right:90px;margin-bottom:30px; padding-top:30px;}
.progress-bar-title{font-size: 16px; color: #333; font-weight: bold;position: absolute; top: 18px; left: 20px;}
.yd-step-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.progress-bar-title {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    position: absolute;
    top: 18px;
    left: 20px;
}
.yd-step-content .yd-step-item>em.yd-step-checkmark:after {
  content: "";
  position: absolute;
  top: 4px;
  left: 10px;
  border: 3px solid #ccc;
  border-top: 0;
  border-left: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 6px;
  height: 12px;
}
.yd-step-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
}

.yd-step-item {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
}

/* 连接线样式 */
.yd-step-line {
    position: absolute;
    height: 3px;
    background-color: #e0e0e0;
    width: 100%;
    left: -50%;
    top: 14px;
    z-index: 1;
}

.yd-step-line-active {
    background-color: #14CE67;
}

/* 覆盖之前的连接线颜色样式，防止重复 */
.yd-step-item-current .yd-step-line {
    /* 不再设置颜色，由专门的类控制 */
}

.yd-step-item>em {
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #ccc;
    position: relative;
    z-index: 2;
}

/* 中间的√ */
.yd-step-content .yd-step-item>em {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.yd-step-content .yd-step-item-current>em {
    border: 2px solid #14CE67;
}

/* 下面的文字 */
.yd-step-content .yd-step-item-bottom {
    margin-top: 10px;
    color: #a5a5a5;
    font-size: 14px;
    text-align: center;
    width: 100%;
}

.yd-step-item-current .yd-step-item-bottom p {
    color: #14CE67;
    font-weight: bold;
}

.yd-step-content .yd-step-item>em.yd-step-checkmark:after {
    content: "";
    position: absolute;
    top: 7px;
    left: 10px;
    border: 3px solid #ccc;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);
    width: 6px;
    height: 10px;
}

.yd-step-content .yd-step-item-current>em.yd-step-checkmark:after {
    border-color: #14CE67;
}

.yd-step-item-bottom {
    position: absolute;
    left: 0;
    top: 40px;
    text-align: center;
    width: 100%;
    padding: 0 4px;
}

.yd-step-item-bottom p {
    white-space: normal;
    word-break: break-word;
    max-width: 100px;
    margin: 0 auto;
    line-height: 1.3;
}
</style>
